<template>
  <div class="detail-info-box overflow-scroll">
    <detail @judgment="judgment"></detail>

    <div class="swtichbox f-a-c">
      <div class="swtichItem f-d-c" v-for="(item, index) in switchList" :key="index">
        <div class="f-a-c text">
          <span
            @click="swtichClck(index)"
            :class="switchCurrten == index ? 'swatce' : ''"
            >{{ item.title }}</span
          >
          <el-tooltip
            class="box-item"
            effect="dark"
            content="点击上方的上传图片上传"
            placement="top-start"
          >
            <svg-icon
              name="wh"
              class="wh"
              v-if="index == 0 && switchCurrten == 1"
            ></svg-icon>
            <svg-icon
              name="icon-wh-lv"
              class="wh"
              v-else-if="index == 0 && switchCurrten == 0"
            ></svg-icon>
          </el-tooltip>
        </div>
        <div class="line" v-if="switchCurrten == index"></div>
      </div>
    </div>

    <!-- @clickdrawer="clickdrawer" :blocks="blocks" -->
    <Waterfall
      scrollBodySelector=".detail-info-box"
      :objsearch="{
        searchType,
        moxingzhonglei,
        AdvancedsearchList,
        sortid,
      }"
      :userType="userType"
      @suiji="suiji"
    ></Waterfall>
  </div>
</template>

<script>
import detail from "./detail.vue";
import Waterfall from "./waterfall.vue";

import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    detail,
    Waterfall,
  },
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      userType: 5,
      AdvancedsearchList: [], //高级搜索数组
      moxingzhonglei: "",
      switchCurrten: 1,
      searchType: -1, // 模型或者图片
      sortid: "",
      switchList: [
        {
          title: "模型图库",
        },
        {
          title: "为你推荐",
        },
      ],
    });
    let swtichClck = (index) => {
      data.switchCurrten = index;
      console.log(index, "asdasd");
      if (index == 1) {
        data.userType = 5;
        suijilclick();

        // judgment();
        // data.AdvancedsearchList = [];
        // data.moxingzhonglei = -1;
        // data.searchType = -1;
      } else {
        console.log(123123);
        data.userType = 6;
        // data.AdvancedsearchList = [];
        // data.moxingzhonglei = -1;
        // data.searchType = -1;
      }
    };
    // 为你推荐
    let judgment = () => {
      console.log("为你推荐");
      let value = JSON.parse(store.state.Recommendyou);
      if (value.type == 1) {
        // 模型
        data.AdvancedsearchList = value.categoryId;
        data.moxingzhonglei = value.checkPoint;
        data.searchType = value.type;
      } else {
        // 图片
        data.AdvancedsearchList = value.categoryId;
        data.moxingzhonglei = value.source;
        data.searchType = value.type;
      }
    };
    let suiji = async (val) => {
      await suijilclick();
    };
    let suijilclick = () => {
      let arr = [1, 5, 2];
      var element = arr[Math.floor(Math.random() * arr.length)];
      data.sortid = element;
    };
    onMounted(() => {
      suijilclick();
      // data.AdvancedsearchList = [];
      // data.moxingzhonglei = -1;
      // data.searchType = -1;
    });
    onUnmounted(() => {});
    return {
      suijilclick,
      suiji,
      judgment,
      swtichClck,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.detail-info-box {
  height: 100%;
}
.swtichbox {
  width: 300px;
  // margin: 0 auto;
  justify-content: space-between;
  // margin-top: 30px;
  margin: 50px auto 25px;
  .swatce {
    color: #64c8dc !important;
  }
  .line {
    position: absolute;
    bottom: -5px;
    width: 70px;
    height: 4px;
    background: #64c8dc;
    border-radius: 4px 4px 0px 0px;
    opacity: 1;
  }
  .swtichItem {
    position: relative;
    cursor: pointer;
    .text {
      > span {
        font-size: 18px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .wh {
        margin-left: 10px;
      }
    }
  }
}
</style>
